<template>
    <div class="note-publish">
       <div class="editor">
            <QuillEditor 
            theme="snow" 
            v-model="state.content"
            placeholder="请输入笔记内容"
            content-type="html"
            />
       </div>
       <div class="note-wrap">
        <div class="note-cell">
            <van-field v-model="state.title" label="标题" placeholder="请输入标题" />
        </div>
        <div class="note-cell">
            <van-field label="图片上传">
                <template #input>
                    <van-uploader 
                        v-model="state.img"
                        :after-read="afterRead"
                        :max-count="1"
                    />
                </template>
            </van-field>
        </div>
        <div class="note-cell">
            <div class="sort" @click="showPicker = true">
                <span>分类</span>
                <span>{{state.note_type}} <van-icon name="arrow" /></span>
            </div>
            <van-popup v-model:show="showPicker" round position="bottom">
                <van-picker
                    :columns="columns"
                    @cancel="showPicker = false"
                    @confirm="onConfirm"
                />
            </van-popup>
            
        </div>
        <div class="btn">
            <van-button type="primary" block @click="publish">发布笔记</van-button>
        </div>
       </div>
    </div>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { reactive, ref } from 'vue';
import axios from '@/api'
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

const state = reactive({
    content: '',
    title:'',
    img: [],
    note_type: '美食'
})

const afterRead = (file) => {
    console.log("读取到了图片咯", file);
}

const showPicker = ref(false);
const columns = [
      { text: '美食', value: '美食' },
      { text: '旅行', value: '旅行' },
      { text: '恋爱', value: '恋爱' },
      { text: '学习', value: '学习' },
      { text: '吵架', value: '吵架' },
];
const onConfirm = ({selectedValues}) => {
    console.log(selectedValues);
    state.note_type = selectedValues[0];
    showPicker.value = false;
}

// 发布
const router = useRouter()
const publish = async() => {
    const res = await axios.post('/note-publish', {
        title: state.title,
        note_content: state.content,
        head_img: state.img.length ? state.img[0].content : '',
        note_type: state.note_type
    })
    showToast(res.msg)
    setTimeout(() => {
        router.push('/noteClass')
    }, 1000)
    console.log(res);
}
</script>

<style lang="less" scoped>
.note-publish {
    min-height: 100vh;
    :deep(.ql-container){
        height: 200px;
    }

    .note-cell{
        border-bottom: 1px solid #d1d5db;
        .sort{
            display: flex;
            justify-content: space-between;
            line-height: 3;
            padding: 3px 16px;
            color: #323233;
        }
    }
    .btn{
        width: 80%;
        margin: 0 auto;
        margin-top: 2rem;
    }
}
</style>